<template>
  <div class="Login">
    <div class="login-right">
      <div class="login-right-warp">
        <div class="login-right-warp-title">login</div>
        <div class="login-right-warp-form">
          <div class="login-right-warp-form_title">用户名登录</div>

          <el-form
            ref="formRef"
            style="max-width: 600px"
            :model="form"
            :rules="rules"
            status-icon
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item prop="account">
              <el-input
                autocomplete="off"
                :prefix-icon="User"
                placeholder="请输入账号"
                v-model="form.account"
                maxlength="9"
                :show-word-limit="true"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                autocomplete="off"
                :prefix-icon="Lock"
                placeholder="请输入密码"
                v-model="form.password"
                maxlength="18"
                minlength="6"
              />
            </el-form-item>
            <el-form-item prop="key">
              <el-input
                :prefix-icon="Promotion"
                class="login-content-code"
                placeholder="请输入验证码"
                v-model="form.key"
                maxlength="6"
                :show-word-limit="true"
              />
              <span class="login-content-code-img">获取验证码</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLogin(formRef)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
          <div class="login-msg">
            * 温馨提示：建议使用谷歌、Microsoft Edge，版本 79.0.1072.62
            及以上浏览器，360浏览器请使用极速模式
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { User, Lock, Promotion } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
let form = ref({
  account: "",
  password: "",
  key: "",
});
let formRef = ref();
const rules = reactive({
  account: [
    { required: true, message: "请填写账号", trigger: "blur" },
    { min: 9, max: 9, message: "账号长度为9", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    { min: 6, max: 18, message: "密码长度为6-18", trigger: "change" },
  ],
  key: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
    { min: 6, max: 6, message: "验证码长度为6", trigger: "change" },
  ],
});

const include = (users) => {
  let flag = false;
  users.forEach((element) => {
    if (element.account == form.value.account) {
      if (element.password == form.value.password) {
        flag = true;
      }
    }
  });
  return flag;
};

const handleLogin = (formRef) => {
  if (!formRef) return;
  formRef.validate((valid) => {
    if (valid) {
      const users = JSON.parse(localStorage.getItem("users")) || [];
      console.log(users);
      console.log(include(users));
      if (include(users)) {
        let v = confirm("登录成功");

        localStorage.setItem("token", "edafwafajwfkawf");
        localStorage.setItem(
          "userInfo",
          JSON.stringify({
            account: form.value.account,
          })
        );

        if (v) {
          router.push("/home");
        }
      } else {
        alert("登录失败");
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="scss">
.Login {
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-right {
    .login-right-warp {
      border: 1px solid #e76959;
      border-radius: 3px;
      width: 500px;
      height: 550px;
      position: relative;
      overflow: hidden;
      background-color: #fff;
      margin: auto;

      .login-right-warp-title {
        height: 130px;
        line-height: 130px;
        font-size: 32px;
        font-weight: 800;
        text-align: center;
        animation: logoAnimation 0.3s ease;
        animation-delay: 0.3s;
        color: #f00;
      }

      .login-right-warp-form {
        padding: 0 50px 50px;
      }

      .login-right-warp-form_title {
        color: #de2910;
        width: 100%;
        padding: 10px 0px;
        border-bottom: 1px solid #e4e7ed;
        position: relative;
      }

      .login-right-warp-form_title::after {
        content: "";
        position: absolute;
        width: 90px;
        height: 2px;
        background: #de2910;
        bottom: 0;
        left: 0px;
      }
    }

    .el-form {
      margin-top: 30px;
    }

    .el-input {
      width: 100%;
      height: 40px;
    }

    .el-button {
      width: 100%;
      height: 40px;
      border-radius: 20px;
      background: #de2910;
      border: #de2910;
      margin: 20px 0px;
    }

    .login-content-code {
      width: 70%;
    }

    .login-content-code-img {
      width: 25%;
      background-color: #fff;
      border: 1px solid rgb(220, 223, 230);
      height: 38px;
      border-radius: 5px;
      margin-left: 4.5%;
      line-height: 38px;
      text-align: center;
      cursor: pointer;
    }

    .login-msg {
      margin-top: 30px;
      color: #a8abb2;
      font-size: 12px;
    }
  }
}
</style>
